<template>
  <div class="kanbanWrap">
    <div class="kanban clearfix">
      <p class="kanban-p">空闲中</p>
      <div class="kanban-div">
        <p :class="index==current?'acitveP':''" v-for="(item,index) of safe" :key="index" @click="saleHandle(index)">{{item}}</p>
      </div>
    </div>
    <Kanban v-if="dataList?true:false" :dataList="dataListArr"/>
  </div>
</template>
<script>
// 获取用户信息
import { dictionary } from '@/utils/dictMixin';
import Kanban from './Kanban';
import { exportExcelFile } from '@/utils/index';
import { authority } from '@/utils/authMixin';
export default {
  name: 'quotedprice',
  mixins: [dictionary,authority],
  components: {
    Kanban,
  },
  data() {
    return {
      safe:['销售组1','销售组2'],
      current:"",
      dataListArr:[],
      dataList:[
      {
        id: '1',
        name: '张三',
        imgUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        num: 10,
        time: '00:00:00'
      },
      {
        id: '2',
        name: '李四',
        imgUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        num: 20,
        time: '00:00:00'
      },
      {
        id: '3',
        name: '刘德华',
        imgUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        num: 50,
        time: '00:00:00'
      },
      {
        id: '4',
        name: '周润发',
        imgUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        num: 60,
        time: '00:00:00'
      }
    ],
    dataList2:[
      {
        id: '1',
        name: '张三2',
        imgUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        num: 10,
        time: '00:00:00'
      },
      {
        id: '2',
        name: '李四2',
        imgUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        num: 20,
        time: '00:00:00'
      },
      {
        id: '3',
        name: '刘德华2',
        imgUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        num: 50,
        time: '00:00:00'
      },
      {
        id: '4',
        name: '周润发2',
        imgUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        num: 60,
        time: '00:00:00'
      }
    ]
    };
  },
  methods: {
    async init(){
      this.dataListArr = this.dataList
    },
    saleHandle(index){
      this.current = index
      console.log(index,"下标")
      if(index == 1){
        this.dataListArr =this.dataList2
        console.log(this.dataList,"下标")
      }else{
        this.dataListArr =this.dataList
      }
    },
    //编辑
    /* editHandle(row) {
        console.log(row)
        this.handleType='edit'
        this.formData = row;
        this.title="编辑客流"
        this.visible = true;
        this.isShow=false
    }, */
    
    // 明细
    /* detailHandle(row) {
        console.log(row)
        this.handleType='show'
        this.formData = row;
        this.title="客流明细"
        this.visible = true;
        this.isShow=false
    }, */
    /* changeHandle(val) {
      console.log(val,"val")
      this.fetchParams = Object.assign(params, val);
      this.querInfo = Object.assign(params, val);
    },
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    },
    closeHandler(val, type) {
      this.visible = val;
      this.isShow=val
      if (type === 'refresh') {
        // 重新加载
        this.fetchParams = { ...this.fetchParams };
      }
    }, */
  },
  mounted() {
    this.init()
  },

};
</script>

<style lang="less" scoped>
.kanbanWrap{
  .kanban{
    height: 50px;
    line-height: 50px;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    .kanban-p{
      font-size: 22px;
      float: left;
      margin-left: 20px;
    }
    .kanban-div{
      font-size: 18px;
      font-weight: 900;
      float: right;
      p{
        float: left;
        width: 88px;
        height: 30px;
        line-height: 30px;
        border: 1px solid cornflowerblue;
        text-align: center;
        border-radius: 8px;
        margin: 10px 5px 0 0;
        cursor: pointer;
      }
      .acitveP{
        background: #189CDD;
      }
    }
  }
}
</style>
